<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单标记</title>
</head>

<body>
    <!-- form表单 method属性如果没有设置的话,默认也是get请求,另外还有post请求 - servlet技术
         action指向的是后台的程序的url路径

         input的name属性的作用 - 后台代码希望获取表单中的某个控件的数据[value]
         那么就是通过name属性来获取的,可能是单个值,也有可能是数组.
    -->
    <form method="get" action="http://www.baidu.com">
        <!-- 普通的文本框 
             required - 在提交表单的时候,该文本框不能为空,如果为空,则提交失败
             maxlength - 文本框中输入的内容的长度
        -->
        <!-- <input type="text" placeholder="请您输入用户名" required maxlength="8"><br> -->

        <!-- 如果希望pattern是有效的,那么一定要配合required一起使用,才能使用正则进行验证 -->

        <!--
            验证的位置 - 前端验证和后端验证
                      - 前端验证是可以绕过去的 - 不安全的
                      - 前端的验证主要目的是为了减轻后端服务器的压力.
        -->

        <input type="text" placeholder="用户名首字母小写,其余随便,6-8" required pattern="[a-z][a-zA-Z0-9_]{5,7}"><br>
        <!-- 密码框 -->
        <input type="password"><br>

        <!--日期框 - 不建议使用的 - 浏览器的兼容性不是特别好.
            实际使用 - 寻找日期的插件 - bootstrap
        -->
        <input type="date"><br>

        <input type="range"><br>

        <!-- 数字框 -->
        <input type="number" value="10" min="5" max="15" step="2"><br>

        <!-- 单选按钮 - 必须是同一组 - 设置相同的name属性-->
        <input type="radio" name="gender" value="M">男 <input value="F" type="radio" name="gender" checked>女 <br>

        <!-- 复选框 -->
        <input type="checkbox" name="hobbies">打瞌睡1
        <input type="checkbox" name="hobbies">打瞌睡2
        <input type="checkbox" name="hobbies">打瞌睡3
        <br>

        <!-- 下拉列表 -->
        <select>
            <option>==请您选择==</option>
            <option value="1">本科</option>
            <option value="2">硕士</option>
            <option value="3">博士</option>
        </select><br>

        <!-- 文本域 
             项目中 - 评论 - 发帖

             插件 - 1 - 百度富文本编辑器
                   2 - ckeditor插件
        -->
        <textarea cols="15" rows="6"></textarea><br>

        <!-- 只读框 -->
        <input type="text" value="20190828001" readonly><br>

        <!--隐藏域 - 相当重要-->
        <input type="hidden" value="1"><br>

        <!-- 表单的按钮的几种形式 -->
        <!-- 1 - 提交按钮 -->
        <input type="submit" value="提交表单">
        <!-- 重置按钮 -->
        <input type="reset" value="重置">
    </form>


</body>

</html>